import {
    Row,
    Col,
    Form,
    Input,
    Modal,
} from 'antd';

const FormItem = Form.Item;




//新增表单
const CreateForm = Form.create()(props => {
    const { modalVisible, form, handleAdd, handleModalVisible } = props;
const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
        if (err) return;
    form.resetFields();
    handleAdd(fieldsValue);
});
};
return (
    <Modal
width={800}
height={800}
destroyOnClose
title="新增"
visible={modalVisible}
onOk={okHandle}
onCancel={() => handleModalVisible()}
>
<Form  layout="vertical" hideRequiredMark>

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
        <FormItem  label="操作名称">
            {form.getFieldDecorator('opername', {
            rules: [{ required: true, message: '请输入至少五个字符的操作名称！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>



        <Col  md={12} sm={24}>
        <FormItem  label="操作类型">
            {form.getFieldDecorator('opertype', {
            rules: [{ required: false, message: '请输入至少五个字符的操作类型！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>

    </Row>

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
        <FormItem  label="操作类方法">
            {form.getFieldDecorator('class_method', {
            rules: [{ required: false, message: '请输入至少五个字符的操作类方法！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>



        <Col  md={12} sm={24}>
        <FormItem  label="方法类型">
            {form.getFieldDecorator('http_method', {
            rules: [{ required: false, message: '请输入至少五个字符的方法类型！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>

    </Row>

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
        <FormItem  label="操作url">
            {form.getFieldDecorator('http_url', {
            rules: [{ required: false, message: '请输入至少五个字符的操作url！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>


        <Col  md={12} sm={24}>
        <FormItem  label="操作参数">
            {form.getFieldDecorator('http_params', {
            rules: [{ required: false, message: '请输入至少五个字符的操作参数！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>

    </Row>

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
        <FormItem  label="操作body参数">
            {form.getFieldDecorator('http_body', {
            rules: [{ required: false, message: '请输入至少五个字符的操作body参数！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>

        <Col  md={12} sm={24}>
        <FormItem  label="操作header参数">
            {form.getFieldDecorator('http_header', {
            rules: [{ required: false, message: '请输入至少五个字符的操作header参数！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>

    </Row>

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
        <FormItem  label="操作内容">
            {form.getFieldDecorator('content', {
            rules: [{ required: false, message: '请输入至少五个字符的操作内容！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>


        <Col  md={12} sm={24}>
        <FormItem  label="耗时">
            {form.getFieldDecorator('cost', {
            rules: [{ required: false, message: '请输入至少五个字符的耗时！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>

    </Row>

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
        <FormItem  label="ip地址">
            {form.getFieldDecorator('createip', {
            rules: [{ required: false, message: '请输入至少五个字符的ip地址！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>


        <Col  md={12} sm={24}>
        <FormItem  label="操作用户">
            {form.getFieldDecorator('createuser', {
            rules: [{ required: false, message: '请输入至少五个字符的操作用户！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>


    </Row>

    
    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



        <Col  md={12} sm={24}>
        <FormItem  label="设备类型">
            {form.getFieldDecorator('client_type', {
            rules: [{ required: false, message: '请输入至少五个字符的设备类型！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>



        <Col  md={12} sm={24}>
        <FormItem  label="备注">
            {form.getFieldDecorator('memo', {
            rules: [{ required: false, message: '请输入至少五个字符的备注！', min: 5 }],
            })(<Input placeholder="请输入" />)}
        </FormItem>
        </Col>

    </Row>



</Form>
</Modal>
);
});

export default CreateForm;



